<@override name="head-styles">
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <style>
        .prism-player .prism-auto-stream-selector {
            position: absolute;
            bottom: 50%;
            width: 100%;
            margin: auto;
            color: #efeff4;
            display: none
        }
        .page-content{
            padding: 0px 0px 0px !important;
        }
    </style>
</@override>
<@override name="page-content">
    <div class="live-play prism-player" id="J_prismPlayer">
    </div>
</@override>
<@override name="page-scripts">
    <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
    <script>
        <#if message?has_content>
            alert("${message}");
        <#else>
        var url = "${url}";
        var coverurl = "${coverurl}";
        var player = new Aliplayer({
              "id": "J_prismPlayer",
              "source": url,
              "width": "100%",
              "height": "500px",
              "autoplay": false,
              "isLive": false,
              "cover": coverurl,
              "rePlay": false,
              "playsinline": true,
              "preload": true,
              "language": "zh-cn",
              "controlBarVisibility": "hover",
              "useH5Prism": true,
              "extraInfo": {
                  "crossOrigin": "anonymous"
                },
                 "skinLayout": [
                 { "name": "bigPlayButton", "align": "blabs", "x": 30, "y": 80 },
                 { "name": "H5Loading", "align": "cc" },
                 { "name": "errorDisplay", "align": "tlabs", "x": 0, "y": 0 },
                 { "name": "infoDisplay" },
                 { "name": "tooltip", "align": "blabs", "x": 0, "y": 56 },
                 { "name": "thumbnail" },
                 { 
                   "name": "controlBar", "align": "blabs", "x": 0, "y": 0,
                   "children": [
                     { "name": "progress", "align": "blabs", "x": 0, "y": 44 },
                     { "name": "playButton", "align": "tl", "x": 15, "y": 12 },
                     { "name": "timeDisplay", "align": "tl", "x": 10, "y": 7 },
                     { "name": "fullScreenButton", "align": "tr", "x": 10, "y": 12 },
                     { "name": "subtitle", "align": "tr", "x": 15, "y": 12 },
                     { "name": "setting", "align": "tr", "x": 15, "y": 12 },
                     { "name": "volume", "align": "tr", "x": 5, "y": 10 },
                     { "name": "snapshot", "align": "tr", "x": 10, "y": 12 }
                   ]
                 }
               ],
              components: [{
                  name: 'BulletScreenComponent',
                  type: AliPlayerComponent.BulletScreenComponent,
                  args: ['${copyright}', {fontSize: '16px', color: '#00c1de'}, 'random']
                }]
            }, function (player) {
                console.log("aliplayer");
            }
        );
        /* HTML5 snapshot button and success callback */
        player.on('snapshoted', function (data) {
          var pictureData = data.paramData.base64
          var downloadElement = document.createElement('a')
          downloadElement.setAttribute('href', pictureData)
          var fileName = 'Aliplayer' + Date.now() + '.png'
          downloadElement.setAttribute('download', fileName)
          downloadElement.click()
          pictureData = null
        })
        </#if>
    </script>
</@override>
<@extends name="/layout/basepage.html"/>